﻿@{
    ViewBag.Title = "Thanh toán";    
}

<fieldset>
    <legend>Tìm kiếm/ Thống kê</legend>
    <table>
        <tr>
            <td style="width: 20%"><span>Ngày thanh toán:</span>
            </td>
            <td>
                @Html.TextBox("dtFrom", null, new { @style = "width:100px", @placeholder = "Từ ngày" })
                @Html.TextBox("dtTo", null, new { @style = "width:100px", @placeholder = "Đến ngày" })                
            </td>
        </tr>
        <tr>
            <td>

            </td>
            <td style="text-align:left">
                <input value="Tìm kiếm" type="button" style="padding: 7px 10px" id="btnSearch"/>
                <input value="Thống kê" type="button" style="padding: 7px 10px" id="btnThongKe" onclick="ExportExcel();"/>
            </td>
        </tr>
    </table>
</fieldset>

<p style="padding: 0 0 20px 0">
    @Html.ActionLink("Tạo mới thanh toán", "CreateKH", null, new { @class = "linkCreate" })
</p>

<table id="jqgData"></table>
<div id="jqgpData"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#dtFrom").datepicker();
        $("#dtTo").datepicker();
        loadGrid();
        $("#gs_Action").css("display", "none");
        $("#gs_DiaChiKH").css("display", "none");
        $("#gs_Price").css("display", "none");
        $("#gs_Date").css("display", "none");
    });

    $('#btnSearch').click(function (event) {
        $("#jqgData").jqGrid('setGridParam', { postData: { from: $("#dtFrom").val(), to: $("#dtTo").val(), masp: $("#SearchMaSP").val(), btn: 'Search' } });
        $('#jqgData').setGridParam({ datatype: "json" }).trigger('reloadGrid');
    });


    function loadGrid() {
        $('#jqgData').setGridParam({ datatype: "json" }).trigger('reloadGrid');
        $("#jqgData").jqGrid({
            url: '@Url.Action("IndexKH", "ThanhToan")',
            hoverrows: true,
            datatype: 'json',
            mtype: 'POST',
            colNames: ['ID', 'Mã khách hàng','Tên khách hàng', 'Địa chỉ khách hàng', 'Tiền thanh toán', 'Ngày thanh toán','Action'],
            colModel: [
                { name: 'ID', index: 'ID', align: 'left', hidden: true },
                { name: 'MaKH', index: 'MaKH', align: 'left', width: '150px' },
                { name: 'TenKH', index: 'TenKH', align: 'left', width: '200px' },
                { name: 'DiaChiKH', index: 'DiaChiKH', align: 'left', width: '300px' },
                { name: 'Price', index: 'Price', align: 'right', width: '110px' },
                {
                    name: 'Date', index: 'Date', width: '90px', align: 'left', editable: false, formatter: 'date', search: true,
                    formatoptions: {
                        srcformat: 'd/m/Y H:i:s',
                        newformat: 'd/m/Y'
                    },
                    align: 'right',
                    sorttype: "date",
                    searchoptions: {
                        sopt: ['eq', 'ne'],
                        dataInit: function (elem) {
                            $(elem).datepicker({
                                dateFormat: 'dd/mm/yy',
                                onSelect: function (dateText, inst) {
                                    setTimeout(function () {
                                        $('#jqgData')[0].triggerToolbar();
                                    }, 100);
                                }
                            });
                        }
                    }
                },
                { name: 'Action', index: 'ID', align: 'center', width: '50px', formatter: ActionFormat },
            ],
            pager: '#jqgpData',
            jsonReader: { repeatitems: false },
            sortname: 'Price',
            viewrecords: true,
            sortorder: 'desc',            
            height: 'auto',
            autoencode: true,
            rowNum: 20,            
            rowList: [5, 10, 20],

        });
        $("#jqgData").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", enableClear: false, ignoreCase: true });

        function ActionFormat(cellvalue, options, rowObject) {
            var rowid = rowObject["ID"];
            return "<input style='height:22px;' type='button' value='Xóa' onclick=\"if(confirm('Bạn có muốn xóa thanh toán ?')) window.location.href='/ThanhToan/Delete/" + rowid + "'\"  /> ";

        }
    }

    function ExportExcel() {
        var sidx;
        var sord;
        var filter;
        var search;
        var filters = jQuery("#jqgData").getGridParam("postData");
        if (filters["sidx"] == 'ID') {
            sidx = "ID";
            sord = "desc";
        } else {
            sidx = filters["sidx"];
            sord = filters["sord"];
            filter = filters["filters"];
            search = filters["_search"];
        }

        var from = $("#dtFrom").val();
        var to = $("#dtTo").val();        

        $.fileDownload('@Url.Action("ExportThanhToan", "ThanhToan")' + '?sidx=' + sidx + '&sord=' + sord + '&from=' + from + '&to=' + to + '&filter=' + filter + '&search=' + search, {
            preparingMessageHtml: "Preparing download.",
            failMessageHtml: "Export failed."
        });
    }
</script>
